<div class="volume">
  <input type="checkbox" class="volume-input" />
  <div class="volume-icon">
    <svg
      viewBox="0 0 24 24"
      width="24"
      height="24"
      stroke="currentColor"
      stroke-width="2"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="volume-svg"
    >
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
      <path
        d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by barisdogansutcu  - Tags: button, volume, voice, sound */
.volume {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgb(205, 191, 247);
  overflow: hidden;
}
.volume-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  overflow: hidden;
  position: relative;
}
.volume-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 999;
}
.volume-icon:before {
  content: "";
  display: flex;
  width: 0px;
  height: 0px;
  border-radius: 100%;
  transition: all 0.2s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(32, 33, 36);
}
.volume-input:checked + .volume-icon:before {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}
.volume-svg {
  z-index: 2;
  color: rgb(32, 33, 36);
  height: 30px;
  width: 30px;
}
.volume-input:checked + .volume-icon svg {
  color: rgb(255, 255, 255);
}

</style>
    